<template>
  <view class="root">
    <view class="container">
      <view class="">
        <image mode="aspectFit" class="logo" src="/static/img/logo.png"></image>
      </view>
      <view class="text-gray text-center margin-top text-xl">{{ title }}</view>
    </view>
    <view class="actions">
      <view class="flex flex-direction">
        <!--<button class="cu-btn bg-brown shadow xl margin-lg" open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button>-->
        <button class="cu-btn shadow xl margin-lg" :class="{primary:checked}" open-type="getUserProfile"
                @tap="getUserProfile" v-if="!isMobile">
          授权获取用户信息
        </button>
		
		<button v-else class="cu-btn bg-brown shadow xl margin-lg primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		  微信手机号登录
		</button>
      </view>
      <view class="flex flex-direction">
        <button class="cu-btn bg-grey shadow xl margin-lr-lg" @click="core.navigateBack()">取消</button>
      </view>
    </view>
    <view class="check" @click="clickCheckBox">
      <checkbox class="round small" :class="{checked}" :checked="checked"></checkbox>
      <view>
        <text class="light" @click.stop="handleTextClick">《免责说明》</text>
        <text>勾选以继续登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import Api from "@/utils/Api";

export default {
  data() {
    return {
      title: uni.globalData.name,
      checked: false,
	  isMobile:false
    }
  },
  methods: {
    clickCheckBox() {
      this.checked = !this.checked
    },
    handleTextClick() {
      uni.navigateTo({url: `/pages/index/article/index?id=12`})
    },
    //点击登录按钮获得的登录信息
    // getUserInfo(res) {
    //   this.login(res.detail)
    // },
    getUserProfile(res) {
      if (!this.checked) {
        this.$toast("请先同意《免责说明》")
        return;
      }
      
      uni.getUserProfile({
        desc: "用于完善用户信息",
        provider: "weixin",
        success: (res) => {
          
          this.login(res)
        },
        fail: (err) => {
          
        },
        complete: (res) => {
          
        }
      })
    },
    //向后台服务器登录
    login(info) {
      if (info.errMsg.indexOf("fail auth deny") > -1) return uni.core.showToast("您拒绝了授权登录！");

      
      this.core.showLoading("登录中");

      // code换取openid
      let {iv, encryptedData} = info;

      Api.login(this.code, encryptedData, iv, "").then(res => {
        if(!res.mobile){
			this.isMobile=res.token;
			this.req.setToken(res.token)
			
		}else{
			this.req.setToken(res.token)
			this.back();
		}
        // uni.setStorageSync("userInfo", res);
        
      }).finally(() => uni.hideLoading())

    },
    back() {
      this.core.prePageHandleMethod('handleLoginTrigger')
      uni.navigateBack();
    },
	
	getPhoneNumber(res) {
	  this.Mobilelogin(res.detail)
	},
	//向后台服务器登录
	Mobilelogin(info) {
	  if (info.errMsg.indexOf("fail auth deny") > -1) return uni.core.showToast("您拒绝了授权登录！");
	
	  
	  uni.core.showLoading("请稍等");
	
	  let {iv, encryptedData} = info;
	 
	
	  Api.bindMobile(encryptedData, iv,{
		  
	  }).then(res => {
	    this.req.getUserInfoCache(userInfo=>{
	      userInfo.mobile = res;
	      this.req.setUserInfoCache(userInfo);
	      this.core.prePageHandleMethod('refresh')
	      uni.navigateBack()
	    })
	  }).finally(() => uni.hideLoading())
	},
  },
  onShow() {
    uni.login({
      provider: 'weixin',
      success: loginRes => {
        this.code = loginRes.code;
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.root {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(100vh - var(--window-top));

  .container {
    //margin-top: r(360px);

    .logo {
      height: r(180px);
      width: r(180px);
    }
  }

  .check {
    position: fixed;
    bottom: r(20px);
    color: #aaa;
    display: flex;
    align-items: center;

    .small {
      margin-right: r(10px);
    }

    .light {
      color: #8bc2ff;
    }

  }

  .actions {
    margin-top: r(90px);
    width: 100%;
    padding: r(0 90px);

    .cu-btn {
      height: r(80px);
      border-radius: r(20px);

      &.primary {
        color: white;
        background-color: $primary-color;
      }
    }
  }
}
</style>
